<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <!--    <meta content="telephone=no" name="format-detection">-->
    <meta name="google" value="notranslate">
    <meta name="root-url" value="">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta property="title" content="">
    <meta property="key" content="">
    <meta property="description" content="">
    <title>我的订单</title>
    <!-- <link rel="stylesheet" href="css/swiper.min.css"> -->
    <link rel="stylesheet" href="css/app-base.css">
    <!-- <link rel="stylesheet" href="css/app-main.css"> -->

    <script  src="js/_config.json"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>

</head>
<body>
<style>
    .pro_type_grid .pro_item{
        width: calc(50% - .21rem * 2);
    }
    .header-search-txt{
        padding-left: 24px;
padding-right: 10px;
        width: 100%;
        background: #dddcdc;
       /* margin-left: 10px;
        margin-right: 10px;*/
        height: 25px;
        border-radius: 50px;
    }
    .page-header-background.header-title{
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 44px;
    }
    .pro_item .cover .photo{
        height:30px !important
    }
    .pro_item .cover{
        text-align: center;
    }
    .pro_item .item_inner{
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: 5px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        height: 55px;
    }
    .pro_item div{
        text-align: center;
        font-size: 13px;
    }
    body,html{
        background: #eee;
/*        height: 100%;*/
    }
    .pro_item{
        display: grid;
grid-template-columns: auto auto;
grid-column-gap: 5px;
    }
    .page-header-background.header-title{
        background: #40af41;
    }
    .p1{
        padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #fff;
padding-top: 6px;
margin-top: -6px;
    }
    .p2{
        margin-left: 10px;
margin-right: 10px;
font-size: 10px;
text-align: center;
margin-bottom: 10px;

    }
    .c1{
        color: #888;
    }
    .d3{
        margin-bottom: 10px;
margin-top: 10px;
    }
    .d4{
        text-align: center;
        margin-bottom: 30px;
        position: fixed;
bottom: 10px;
width: 100%;
    }
    .but-lx{
    border: none;
width: 70%;
background: #f08818;
color: #fff;
line-height: 30px;
  border-radius: 50px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #40af41 !important;
}
.swiper-pagination-bullet{
    width: 5px !important;
height: 5px !important;
border-radius: 50px !important;
background: #888 !important;
}
.fb.fb-user{
    background-image: url(../images/user2.png) !important;
    background-position: 0 0 !important;
}
.fb.fb-home{
    background-image: url(../images/home2.png) !important;
    background-position: 0 0 !important;
}
.nav-controller{
    color:#888 !important
}
.nav-controller.active{
    color:#40af41 !important
}
body{
    font-size: 12px;

}
.ppp2{
    border-left-width: 1px;
border-left-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-radius: 50px;
border-color: #f23a0f;
color: #f23a0f;
}
.page-content{
    background: #fff;bottom: 15px;
}
.page-header-background.header-title{
    position: fixed !important;
top: 0px !important;
width: 100% !important;
z-index: 999 !important;
}
#content{
    margin-top: 44px;
}

</style>
<div style="height: 15px;width: 100%;"></div>
<div id="header" class="page-header">
</div>
<div id="vue-main">
    <div id="content" class="page-content" >
        <div class="">
            
            <div class="page-header-background header-title">
                <a href="/"><div style="position: absolute;padding-top: 5px;padding-left: 5px;"><img style="height: 20px;" src="images/return.png"></div></a>
                <div>我的订单</div>
            </div>
            <div style="padding-left: 10px;padding-right: 10px;line-height: 44px;font-size: 12px;border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #cecece;">全部订单</div>
    <a v-for="vlist in list" :href="'order.html?id='+vlist.id">
        <div style="display:grid;grid-template-columns: 45px auto 50px;
        padding: 10px;text-align: center;grid-column-gap: 10px;">

            <div style="line-height: 45px;background: #40af41;border-radius: 3px;color: #fff;font-size: 9px;">{{vlist.order_on}}</div>
            <div style="text-align: left;">
                <div style="margin-bottom: 6px;color: #1a7d1bf7;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{vlist.chwjicity}}->{{vlist.chwshoujiguo}}</div>
                <div style="font-size: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">寄送的: {{vlist.chwtype}}.{{vlist.chwpingzhong}}.{{vlist.chwzhong}} . <span style="color:red;font-size:12px">{{vlist.money}}元</span></div>
            </div>
            <div style="display: grid;grid-template-rows: auto 20px auto;">
                <div></div>
             
                    <div v-if="vlist.order_status==1" class="ppp2">新订单</div>
                    <div v-else-if="vlist.order_status==2" class="ppp2">已付款</div>
                    <div v-else-if="vlist.order_status==3" class="ppp2">派送中</div>
                    <div v-else-if="vlist.order_status==4" class="ppp2">已结束</div>
                    <div v-else-if="vlist.order_status==5" class="ppp2">已关闭</div>
                
                <div></div>
            </div>
        </div>
    </a>

    <!-- <div style="height:1px;width:100%;background: #cecece">&nbsp;</div> -->


            
          
        </div>
        
    </div>
    <div class="p2 c1">
      
        <div>客服工作时间：9:00~18:00，若有回复不及时，请耐心等待，客服会在上班后第一时间联系您！</div>
    </div>
</div>


<script>
    var vm = new Vue({
        el: '#vue-main',
        data() {
            return {
                list: [],
                searchkey:""
            }
        },
        created(){
           let url=window.location.search;
           let urlParams = new URLSearchParams(url);
           this.searchkey = urlParams.get("key");
           // if(this.url==0){
           //     url=window.location.href;
           //    // window.location.href=url;
           // }
            if (this.searchkey) {
                this.getUserInfoSearch();
            }else{
                this.getUserInfo();
            }
            

        },
        mounted(){
            
        },
        methods: {
           
            getUserInfo:function(){
                this.$http.post(siteConfig.BaseUrl+'/h5/api/?url=list',{
                    token:localStorage.getItem("__token__")
                },{emulateJSON: true}).then(function(res){
                    this.list=res.body.data;
                },function(){
                    console.log("request fail");
                })
            },
            getUserInfoSearch:function(){
                this.$http.post(siteConfig.BaseUrl+'/h5/api/?url=search',{
                    token:localStorage.getItem("__token__"),
                    searchkey:this.searchkey
                },{emulateJSON: true}).then(function(res){
                    this.list=res.body.data;
                },function(){
                    console.log("request fail");
                })
            }
        }
    })
    
</script>



    
</body>
</html>


